<template>
<div>
  <el-button-group>
    <el-button
      v-for="(item, index) in btnGroup"
      :key="index"
      @click="change(item)"
    >{{item.name}}</el-button>
    <keep-alive>
      <component :is="currentCom"></component>
    </keep-alive>
  </el-button-group>
</div>
</template>

<script>
  import ChildOne from './component/child1'
  import ChildTwo from './component/child2'
  export default {
    name: 'index',
    components:{
      ChildOne,ChildTwo
    },
    data(){
      return{
        btnGroup: [
          {name: 'ChildOne', disabled: true},
          {name: 'ChildTwo', disabled: false},
        ],
        currentCom:'ChildOne'
      }
    },
    methods:{
      change(e){
        this.currentCom = e.name;
      }
    }
  }
</script>

<style scoped>

</style>
